<div class="layui-card layadmin-tabs-card">
    <div class="layui-card-header">
        <span class="layui-breadcrumb">
            <a href="/management/index">首页</a>
            <a><cite>角色管理</cite></a>
        </span>
    </div>
</div>

<div class="layui-fluid layadmin-container layui-anim-fadein" id="NB-role-tab">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-sm4">
            <div class="layui-card">
                <div class="layui-card-header">
                    角色信息列表
                    <a @click="add" style="cursor: pointer;"><i class="layui-icon layui-icon-add-circle"></i> </a>
                </div>
                <div class="layui-card-body">
                    <table class="layui-table role-list" lay-skin="nob">
                        <tbody>
                        <tr v-for="(role,index) in roles" v-bind:class="{'select':role.id == selected}"
                            @click="selectRole(role.id,role.cnName)">
                            <td>
                                <i class="layui-icon layui-icon-username"></i><span
                                    v-bind:class="{'layui-selected':role.id == selected}"> {{role.cnName}} </span>
                                <i v-if="role.id == selected" class="layui-icon layui-icon-ok layui-selected"></i>
                            </td>
                            <td class="layui-float-right layui-role-operate">
                                <a @click.stop="edit(role)"> <i class="layui-icon layui-icon-edit"></i></a>
                                <a @click.stop="del(role)"> <i class="layui-icon layui-icon-close"></i></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-sm8">
            <div class="layui-card">
                <div class="layui-card-header layui-elip">资源列表（仅包含需授权的资源） - <span style="color: #5FB878;">{{roleName}}</span></div>
                <div class="layui-card-body">
                    <form class="layui-form">
                        <div id="roleTree" style="width:100%;"></div>
                    </form>
                </div>
                <div class="layui-card-footer">
                    <button class="layui-btn" @click="subRes">提交更改</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="NB-add-role">
    <form class="layui-form" style="padding: 20px 30px 0 0;">
        <div class="layui-form-item">
            <label class="layui-form-label">角色标识</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入角色标识" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色中文名</label>
            <div class="layui-input-block">
                <input type="text" name="cnName" required lay-verify="required" placeholder="请输入角色中文名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-bg-cyan" lay-submit lay-filter="addRole">立即提交</button>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="NB-edit-role">
    <form class="layui-form" style="padding: 20px 30px 0 0;">
        <input name="id" type="hidden">
        <input name="name" type="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">角色中文名</label>
            <div class="layui-input-block">
                <input type="text" name="cnName" required lay-verify="required" placeholder="请输入角色中文名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-sm layui-bg-cyan" lay-submit lay-filter="updateRole">立即提交</button>
            </div>
        </div>
    </form>
</script>
<style>
    .layui-table.role-list tr {
        cursor: pointer;
    }

    .layui-table.role-list tr.select {
        background: #f2f2f2;
    }

    .layui-role-operate > a:hover, .layui-card-header > a:hover {
        font-weight: 800;
        color: #0e0e0e;
    }
</style>
<script src="/static/plugins/layui-xtree/layui-xtree.js"></script>
<script th:inline="javascript">
    var roleTabApp = new Vue({
        el: "#NB-role-tab",
        data: {
            resTree: null,
            roles: [[${roleList}]]
            , selected: [[${roleList[0].id}]]
            , roleName: [[${roleList[0].cnName}]]
            , index: null
        },
        created: function () {
            window.__roleId = this.selected;
        },
        mounted: function () {
            layui.use(['form', 'element'], function () {
                var form = layui.form,
                    element = layui.element;

                element.render();
                window.resTree = new layuiXtree({
                    elem: 'roleTree'   //(必填) 放置xtree的容器id，不要带#号
                    , form: form     //(必填) layui 的 from
                    , ckall: true
                    , isopen: false
                    , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
                        end: "<i class='layui-icon layui-icon-template-1'></i>"      //末尾节点的图标
                    }
                    , data: BMY.url.prefix + '/resource/tree?roleId='
                });

                form.on('submit(addRole)', function (data) {
                    $.post(BMY.url.prefix + "/role/create", data.field, function (resp) {
                        layer.msg(resp.message);
                        if (resp.code === 200) {
                            layer.close(roleTabApp.index);
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        }
                    });
                    return false;
                });

                form.on('submit(updateRole)', function (data) {
                    $.post(BMY.url.prefix + "/role/update", data.field, function (resp) {
                        layer.msg(resp.message);
                        if (resp.code === 200) {
                            layer.close(roleTabApp.index);
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        }
                    });
                    return false;
                })
            })
        }
        , methods: {
            selectRole: function (roleId, roleCnName) {
                roleTabApp.selected = roleId;
                window.__roleId = roleId;
                roleTabApp.roleName = roleCnName;
                window.resTree.render();
            }
            , subRes: function () {
                var selectedInputs = window.resTree.GetChecked();
                var resourceIds = [];
                for (var i = 0; i < selectedInputs.length; i++) {
                    resourceIds.push(selectedInputs[i].value);
                }
                $.post(BMY.url.prefix + '/update/role/resource', {
                    roleId: roleTabApp.selected,
                    resourceIds: resourceIds
                }, function (resp) {
                    layer.msg(resp.message);
                    if (resp.code === 200) {
                        window.resTree.render();
                    }
                })
            }
            , add: function () {
                roleTabApp.index = layer.open({
                    title: "添加新角色",
                    type: 1,
                    content: $("#NB-add-role").html()
                });
            }
            , edit: function (role) {
                roleTabApp.index = layer.open({
                    id: "NB-edit-layer",
                    title: "修改 [" + role.name + "] 的角色名",
                    type: 1,
                    content: $("#NB-edit-role").html(),
                    success: function () {
                        $("#NB-edit-layer input[name=id]").val(role.id);
                        $("#NB-edit-layer input[name=name]").val(role.name);
                        $("#NB-edit-layer input[name=cnName]").val(role.cnName);
                    }
                });
            }
            , del: function (role) {
                layer.confirm('确认删除[' + role.cnName + ']角色吗？', {skin: 'noteblog-layer'}, function () {
                    $.post(BMY.url.prefix + "/role/delete", {roleId: role.id}, function (resp) {
                        layer.msg(resp.message);
                        if (resp.code === 200) {
                            layer.closeAll();
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        }
                    });
                });

            }
        }
    })
</script>